<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view class="detail_header flex flex-align flex-center">
			<!-- <view class="left" @click="go_back"><tui-icon name="arrowleft" color='#333' :size="32"></tui-icon></view> -->
			<view class="list" :class="tabsInd=='lunbo'?'active':''" @click="tabIndx('lunbo')" style="border-radius: 10rpx 0 0 10rpx;">商品</view>
			<view class="list" :class="tabsInd=='tuwen'?'active':''" @click="tabIndx('tuwen')" style="border-radius: 0 10rpx 10rpx 0;">详情</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="detail_header flex flex-align flex-center" style="padding-top: 30rpx;">
			<view class="list" :class="tabsInd=='lunbo'?'active':''" @click="tabIndx('lunbo')" style="border-radius: 10rpx 0 0 10rpx;">商品</view>
			<view class="list" :class="tabsInd=='tuwen'?'active':''" @click="tabIndx('tuwen')" style="border-radius: 0 10rpx 10rpx 0;">详情</view>
		</view>
		<!-- #endif -->
		<scroll-view class="scroll_view" :scroll-y="true" :scroll-into-view ='scroll_tabs' :scroll-with-animation="true">
			<view class="" id="lunbo" style="height: 120rpx;"></view>
			<view class="lunbo">
				<swiper class="swiper" circular  :autoplay="true" :current='current'>
					<swiper-item v-for="(item,index) in dataBanner" :key='index' :data-index="current">
						<image :src="item" mode="aspectFit" @click="previewImage(index)"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="detail_title">
				<view class="hei_2 title ">{{dataInfo.name}}</view>
				<view class="hei_6 miaoshu"> {{dataInfo.remark}}</view>
				<view class="price">￥{{dataInfo.price_selling}}</view>
			</view>
			
			<!-- <view class="pinglun flex flex-align flex-bt" id="tuwen" @click="go_url('/pages/shop/pingjia_list?id='+id)">
				<view class="left hei_6">用户评论({{dataInfo.total||0}})</view>
				<view class="right"><tui-icon name="arrowright" :size="24" color="#494949"></tui-icon></view>
			</view> -->
			<view class="detail_xq" id="tuwen">
				<view class="shangla flex flex-align flex-center" style="border-top: 1px solid #efefef;border-bottom: 1px solid #efefef;">
					<tui-icon name="arrowup" :size="24" color="#494949"></tui-icon>
					<view class="" @click="tab('tuwen')">上拉查看图文详情</view>
				</view>
				<view class="tuwen">
					<jyf-parser :html="dataInfo.content" ref="article"></jyf-parser>
					<!-- <image src="https://firework.cyx.zzcyx1688.cn/webhttps://firework.cyx.zzcyx1688.cn/web/static/xiangqing.png" mode="widthFix"></image> -->
				</view>
			</view>
		</scroll-view>
		<view class="detail_foot flex flex-align">
			<!-- <view class="one" style="position: relative;">
				<tui-icon name='kefu' color="#000000" :size="24"></tui-icon>
				<view class="wenzi">客服</view>
				<button open-type="contact" style="position: absolute;background: transparent;width: 100%;height: 100%;left: 0;top: 0;">
					
				</button>
			</view> -->
			<view class="one" @click="go_cart">
				<tui-icon name='cart' color="#000000" :size="24"></tui-icon>
				<view class="wenzi">购物车</view>
			</view>
			<view class="two btn bai" @click="showPopup(1)">加入购物车</view>
			<!-- <view class="two btn bai" @click="showPopup(2)">立即预约</view> -->
		</view>
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="popup_main">
				<view class="close flex flex-align flex-end">
					<tui-icon name="shut" :size="20" color="rgb(144 147 153)" @click="hidePopup()"></tui-icon>
				</view>
				<view class="one flex">
					<image :src="dataInfo.cover" mode=""></image>
					<view class="right">
						<view class="wenzi text_one">{{dataInfo.name}}</view>
						<view class="" style="font-size: 24rpx;color: #999;height: 40rpx;margin-top: 5rpx;">{{yixuan}}</view>
						<view class="price"><text>￥</text>{{jiage}}</view>	
					</view>
				</view>
				<view class="view-shu">规格</view>
				<view class="view-buju">
					<view class="name" v-for="(item,index) in dataInfo.items" :key="index" :class="tabs==item.id?'active':''" @click="tab(item)">{{item.goods_spec}}</view>
					
				</view>
				<view class="view-jishi flex flex-align flex-bt">
					<view class="left">
						购买数量 <text>剩余{{(dataInfo.stock_total-dataInfo.stock_sales).toFixed(0)}}件</text>
					</view>
					<tui-numberbox  :min="1" :value="value" @change="change"></tui-numberbox>
				</view>
				<view class="view-btns flex flex-align">
					<view class="view-btn flex-1 goBuy" @click="getTab">确定</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				dataBanner:[],
				current:0,
				scroll_tabs:'',
				id:'',
				dataInfo:'',
				popupShow:false,
				value:1,
				count:0,
				tabIndex:1,
				tabs:0,
				guige:'',
				jiage:'',
				yixuan:'',
				tabsInd:'lunbo'
			}
		},
		onLoad(e) {
			let that = this
			that.id =e.shopId
			that.getData()
		},
		methods: {
			go_back(){
				uni.navigateBack()
			},
			go_url(e){
				console.log(e)
				this.tui.href(e)
			},
			previewImage(index) {
			  uni.previewImage({
				current: index, // 当前显示图片索引
				urls: this.dataBanner // 需要预览的图片http链接列表
			  });
			},
			tabIndx(e){
				this.tabsInd = e
				this.scroll_tabs = e
			},
			change(e){
				this.value = e.value;
			},
			go_cart(){
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			hidePopup(){
				this.popupShow = false
			},
			showPopup(e){
				let that = this
				that.tabIndex = e
				that.popupShow = true
			},
			tab(e){
				console.log(e)
				let that = this
				that.guige = e
				that.jiage = e.price_selling
				that.yixuan = e.goods_spec
				that.tabs = e.id
			},
			
			getData(){
				let that = this
				that.tui.request("api.nutrition/goodsDetail", "get", {code:that.id}, false, true, false).then((res) => {
					that.dataBanner = res.data.info.slider
					that.dataInfo =res.data.info
					that.guige = res.data.info.items[0]
					that.jiage = that.guige.price_selling
					that.yixuan = that.guige.goods_spec
					that.tabs = that.guige.id
					let data = {}
					data.title = '磊哥花炮'
					data.desc = that.dataInfo.name
					data.share_img = that.dataInfo.cover
					uni.setStorageSync('shareShop', data)
					that.tui.wxShare(1,that.id)
				}).catch((res) => {})
			},
			getTab(){
				let that = this
				if(that.tabIndex==1){
					that.add_cart()
				}else{
					that.submite()
				}
			},
			add_cart(){
				let that = this
				let data = that.guige.goods_code+"@"+that.guige.goods_sku+"@"+that.value
				that.popupShow = false
				that.tui.request("api.auth.order/addCart", "post", {items:data}, false, false, false).then((res) => {
					console.log(res)
					that.tui.toast('添加成功')
				}).catch((res) => {})
			},
			submite(){
				// console.log(e);
				let that = this
				that.popupShow = false
				let data = that.guige.goods_code+"@"+that.guige.goods_sku+"@"+that.value
				that.tui.request("api.auth.order/add", "post", {items:data}, false, false, false).then((res) => {
					that.tui.href('/pages/shop/order_confirm?id='+res.data.order_no)
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f5f5f5;}
	.scroll_view{height: 100vh;box-sizing: border-box;}
	.detail_header{position: fixed;top: 0;left: 0;width: 100%;padding:20rpx 0 20rpx ;background: #fff;color: #bbe68d;z-index: 111;
		.left{position: absolute;z-index: 1111;bottom:16rpx ;left: 30rpx;}
		.list{font-size: 30rpx;color: #bbe68d;width: 130rpx;border: 1px solid #bbe68d;text-align: center;padding: 10rpx 0;}
		.list.active{background: #bbe68d;color: #fff;border:1px solid #bbe68d;}
	}
	.lunbo{position: relative;background: #fff;
		.swiper{height: 750rpx;width:750rpx;margin: 0 auto;
			image{
				width: 750rpx;height: 750rpx;
			}
		}
		
	}
	.detail_title{padding: 20rpx 30rpx;background: #fff;
		.title{font-size: 32rpx;margin-bottom: 6rpx;}
		.price{color: #e73049;font-weight: bold;font-size: 32rpx;margin-top: 10rpx;}
		.miaoshu{color: #999;font-size: 24rpx;}
	}
	.fuwu_list{margin-top: 4rpx;
		.list{padding: 30rpx;background: #fff;margin-bottom: 4rpx;
			.left{width: 120rpx;text-align: center;position: relative;}
			.left:before{position: absolute;content: '';left: -10rpx;top:16rpx;background: #000;width: 10rpx;height: 10rpx;border-radius: 100%;}
			.right{width: 630rpx;line-height: 1.6;}
		}
	}
	.pinglun{background: #fff;margin: 20rpx 0;padding: 30rpx;}
	.detail_xq{background: #fff;padding-bottom: 160rpx;
		.shangla{padding: 20rpx 0;}
		.tuwen{
		}
	}
	.detail_foot{position: fixed;bottom: 0;left: 0;width: 100%;height: 160rpx;background: #fff;padding-bottom: 30rpx;
		.one{width: 200rpx;text-align: center;
		}
		.two{width: 560rpx;margin-right:30rpx;height: 90rpx;line-height: 90rpx;border-radius: 4rpx;text-align: center;}
		.two.hei{margin-left: 20rpx;background: #fff;color: #c5e285;border: 1px solid #c5e285;}
		.two.bai{background: #f20;color: #fff;}
	}
	.popup_main{border-radius: 20rpx 20rpx 0 0;padding: 20rpx;
		.one{
			padding-bottom: 30rpx;
			border-bottom: 1px solid #e5e5e5;
			image{width: 150rpx;height: 150rpx;margin-right: 20rpx;border-radius: 20rpx;}
			.right{
				.wenzi{width: 500rpx;margin-top: 10rpx;}
				.price{font-size: 44rpx;color: #333;font-weight: 600;
					text{font-size: 24rpx;}
				}
			}
		}
		.view-shu {
		    padding: 20rpx 0;
		    font-size: 28rpx;
		    font-family: PingFang;
		    font-weight: 400;
		    color: #333;
		}
		.view-buju{
		    display: flex;
		    align-items: center;
		    flex-wrap: wrap;
			.name{
			    border-radius: 10rpx;min-width: 300rpx;
			    font-size: 28rpx;
			    font-family: PingFang;
			    font-weight: 400;
			    margin: 0 30rpx 30rpx 0;
			    padding: 10rpx 20rpx;
				color: #999;border: 1px solid #999;
			}
			.name.active{ background-color: #fff;color: #f20;border: 1px solid #f20;}
		}
		.view-jishi{
			padding-top: 20px;
			.left{color: #333;
				text {
				    font-size: 24rpx;
				    font-family: PingFang;
				    font-weight: 400;
				    color: #999;margin-left: 20rpx;
				}
			}
		}
		.view_yq{
			color: red;
			opacity: .7;
			font-size: 11px;
			padding-top: 10px;
		}
		.view-btn{
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #f20;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 700;
			color: #fff;	margin: 60rpx 0 30rpx;
		}
		.goBuy{background: #f20;color: #fff;}
	}
</style>